<template>
  <div class="box">
    <van-nav-bar title="- 出入境证件 便捷办理 -" />
    <van-grid :column-num="3" :border="false" class="boxgrid">
      <!-- <van-grid-item icon="photo-o" text="预约办证" /> -->
      <van-grid-item :icon="zbcltb" text="准备材料" @click="zbcl" />
      <!-- <van-grid-item icon="photo-o" text="查询进度" /> -->
      <van-grid-item :icon="lqzjtb" text="领取证件" @click="lqzj" />
      <van-grid-item :icon="gdtb" text="更多" @click="rcdf" />
    </van-grid>
    <div class="axioa">
      <van-nav-bar title="- 办理出入境证件指南 -" />
      <div class="zhinan" @click="xiangqing1">
        <div class="namea">普通护照服务指南</div>
        <div class="nameneir">一、办理依据：
          1、《中华人民共和国护照法》
          2、《中华人民共和国出境入境管理法》
          3、《中华人民共和国普通护照和出入境通行证签发管理办法》
          4、《中华人民共和国电子普通护照签发管理工作规范》
        </div>
        <div class="namerq">2023-10-21</div>
        <van-divider />
      </div>
      <div class="zhinan" @click="xiangqing2">
        <div class="namea">往来港澳通行证和签注签发服务指南</div>
        <div class="nameneir">
          一、适用范围
          本指南适用于内地居民申请往来港澳通行证和签注。
          二、审批依据
          《中华人民共和国出境入境管理法》、《中国公民因私事往来香港地区或者澳门地区的暂行管理办法》。
          三、受理机构
          中华人民共和国出入境管理局委托的县级以上公安机关出入境管理部门。

        </div>
        <div class="namerq">2023-10-21</div>
        <van-divider />
      </div>
      <div class="zhinan" @click="xiangqing3">
        <div class="namea">内地居民前往港澳通行证服务指南</div>
        <div class="nameneir">
          一、办理依据：
          1、《中华人民共和国出境入境管理法》
          2、《中国公民因私事往来香港地区或者澳门地区的暂行管理办法》
          二、办理条件
          1、符合以下条件之一：
          ①在香港或者澳门定居人员的内地配偶及其偕行的未满18周岁的子女，需要前往香港或者澳门家庭团聚的；

        </div>
        <div class="namerq">2023-10-21</div>
        <van-divider />
      </div>
      <div class="zhinan" @click="xiangqing4">
        <div class="namea">
          大陆居民往来台湾通行证及签注
          服务指南

        </div>
        <div class="nameneir">
          一、办理依据：
          1、《中华人民共和国护照法》
          2、《中华人民共和国出境入境管理法》
          3、《中华人民共和国往来台湾通行证及签注签发规范》
          二、办理条件
          公民前往旅游、探亲、学习、定居、接受和处理财产，处理婚丧及其他因私事务，应邀前往台湾进行经济、文化、科技、体育、学术等活动或者参加会议、事务商谈、经贸交流、采访等活动。

        </div>
        <div class="namerq">2023-10-21</div>
        <van-divider />
      </div>
    </div>
    <div class="axioa">
      <van-nav-bar title="- 通关边检注意事项 -" />
      <van-image width="100%" height="160" lazy-load :src="imga" @click="tpfd" />
      <van-image-preview v-model="show" :images="images" />
    </div>
    <div class="axioa">
      <!-- <van-nav-bar title="- 移民出入境便利政策 -" /> -->

      <!-- <van-tabs v-model="active" color="#000000">
        <van-tab title="便利政策">
          <div class="zhinans">
            <div class="span1">
              <div class="nameas">办理出入境证件指南</div>
              <div class="nameneirs">办理出入境证件指南办理出入境证件指南办理出入境证件指南</div>
              <div class="namerqs">2023-10-23</div>
            </div>
            <div class="span2">
              <van-image width="100" height="100" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
            </div>
            <van-divider />
          </div>
          <div class="zhinans">
            <div class="span1">
              <div class="nameas">办理出入境证件指南</div>
              <div class="nameneirs">办理出入境证件指南办理出入境证件指南办理出入境证件指南</div>
              <div class="namerqs">2023-10-23</div>
            </div>
            <div class="span2">
              <van-image width="100" height="100" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
            </div>
            <van-divider />
          </div>
          <div class="zhinans">
            <div class="span1">
              <div class="nameas">办理出入境证件指南</div>
              <div class="nameneirs">办理出入境证件指南办理出入境证件指南办理出入境证件指南</div>
              <div class="namerqs">2023-10-23</div>
            </div>
            <div class="span2">
              <van-image width="100" height="100" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
            </div>
            <van-divider />
          </div>
          <div class="zhinans">
            <div class="span1">
              <div class="nameas">办理出入境证件指南</div>
              <div class="nameneirs">办理出入境证件指南办理出入境证件指南办理出入境证件指南</div>
              <div class="namerqs">2023-10-23</div>
            </div>
            <div class="span2">
              <van-image width="100" height="100" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
            </div>
            <van-divider />
          </div>
        </van-tab>
        <van-tab title=""></van-tab>
        <van-tab title=""></van-tab>
        <van-tab title=""></van-tab>
      </van-tabs> -->

    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        imga: require('@/assets/image/lct.jpg'),
        zbcltb: require('@/assets/image/zhunbeicailiao.png'),
        lqzjtb: require('@/assets/image/lingquzhengjian.png'),
        gdtb: require('@/assets/image/gengduo.png'),
        show: false,
        images: [
          require('@/assets/image/lct.jpg')
        ],
        active: '1'
      }
    },
    methods: {
      tpfd() {
        console.log(123);
        this.show = true
      },
      zbcl() {
        this.$router.push('/zbcl')
      },
      rcdf() {
        this.$router.push('/rzdf')
      },
      lqzj() {
        this.$router.push('/lqzj')
        console.log("123");
      },
      xiangqing1() {
        this.$router.push('/zbclxx')
      },
      xiangqing2() {
        this.$router.push('/zbclxxa')
      },
      xiangqing3() {
        this.$router.push('/zbclxxb')
      },
      xiangqing4() {
        this.$router.push('/zbclxxc')
      },
    },
  }
</script>

<style scoped lang="less">
  .van-nav-bar__title {
    font-size: 20px;
    // font-weight: 400;
  }

  .box {
    margin: 0;
    padding: 0;
    background-color: #F4F4F4;
    height: 100vh;

    .axioa {
      margin-bottom: 10px;
    }

    .zhinan {
      background-color: #FFFFFF;

      // border-bottom: #999999 solid 1px;
      .namea {
        width: 90%;
        margin: 0 auto;
        padding: 10px 0 8px 0;
        font-weight: bold;
      }

      .nameneir {
        width: 90%;
        margin: 0 auto;
        padding: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #999999;

      }

      .namerq {
        width: 90%;
        padding: 5px;
        margin: 0 auto;
        color: #999999;
        font-size: 12px;
      }

      .van-divider {
        margin: 0;
      }
    }

    .zhinans {
      background-color: #FFFFFF;
      display: flex;

      .span1 {
        width: 71%;
      }

      .span2 {
        // width: 35%;
      }

      .nameas {
        width: 90%;
        margin: 0 auto;
        padding: 10px 0 8px 0;
        font-weight: bold;
      }

      .nameneirs {
        width: 90%;
        margin: 0 auto;
        padding: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #999999;

      }

      .namerqs {
        width: 90%;
        padding: 5px;
        margin: 0 auto;
        color: #999999;
        font-size: 12px;
      }

      .van-divider {
        margin: 0;
      }
    }
  }

  .boxgrid {
    margin-bottom: 10px;
  }
</style>